<template>
  <div class="pagination">
    <el-pagination
      v-if="pageTotal > 0"
      background
      :page-sizes="paginations.pageSizes"
      :page-size="paginations.size"
      :layout="paginations.layout"
      :total="pageTotal"
      :current-page="paginations.index"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "pagination",
  data() {
    return {
      paginations: {
        index: 1, // 当前位于哪页
        size: 10, // 1页显示多少条
        pageSizes: [10, 20, 50, 100], //每页显示多少条
        layout: "total, sizes, prev, pager, next, jumper" // 翻页属性
      },
      page: {
        index: 1, // 当前位于哪页
        size: 10
      }
    };
  },
  model: {
    prop: "page",
    event: "change"
  },
  props: {
    pageTotal: Number
  },
  created() {},
  mounted() {},
  methods: {
    // 上下分页 pageIndex
    handleCurrentChange(page) {
      this.page.index = page;
      this.$emit("change", this.page);
    },
    // 每页多少条切换 pageSize
    handleSizeChange(page_size) {
      this.page.size = page_size;
      this.$emit("change", this.page);
    }
  }
};
</script>

<style scoped>
.pagination {
  text-align: right;
  padding: 10px 18px;
}
</style>
